<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Scotiabank</title>
        <meta http-equiv="X-UA-Compatible" content="IE=9">
		<!-- You can load the jQuery library from the Google Content Network.
		Probably better than from your own server. -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<!-- Load the CloudCarousel JavaScript file -->
		<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
        <script type="text/javascript" src="js/jquery.imagesloaded.min.js"></script>
        
		<link href="css/sbk-rs.css" type="text/css" rel="stylesheet">
		<link href="font/7492f661-79f44ab290f26a9eaf984a754865465.css" type="text/css" rel="stylesheet">
        
        <!--[if gte IE 9]>
  		<style type="text/css">
    		.gradient {
       			filter: none;
    		}
  		</style>
		<![endif]-->

		<script>
			$(document).ready(function() {

				//loading out files
				$("#header").load("adds/header.html");
				$("#footer").load("adds/footer.html");

				var winWidth = $("#carousel1").width() * 0.5;
				var winHeight = $("#carousel1").height() * 0.15+10;
				// This initialises carousels on the container elements specified, in this case, carousel1.
				$("#carousel1").CloudCarousel({
					reflHeight: 56,
					reflGap:2,
					altBox : $("#alt-text"),
					titleBox : $("#title-text"),
					buttonLeft : $("#left-but"),
					buttonRight : $("#right-but"),
					yRadius:40,
					xPos : winWidth,
					yPos : winHeight,
					speed:0.15,
					mouseWheel:true,
					autoRotate:true,
					autoRotateDelay:2000,
					bringToFront: false

					
				});
				
			//fadeIn
			$("img").imagesLoaded({progress: function (isBroken, $images, $proper, $broken) {
				$(this).fadeTo("medium", 1);
			}, always: function($images) {
				$("img").fadeTo("medium", 1);
			}});

				$(window).resize(function() {

					winWidth = $("#carousel1").width() * 0.5;
					winHeight = $("#carousel1").height() * 0.3;

					//alert("hola");
					//$("#carousel1").children().children().children().remove();

				});
			});

		</script>
	</head>
	<body>
		<div class="container_50">
			<div class="grid_50" id="header">

				<!--HEADER CONTENT-->

			</div>
			<hr class="clear">
            
            <div id="titles" class=" grid_50"> 
            
            
            	<!--TITULOS-->
                <div class="grid_10 m-top10 alpha">
                 	<img src="img/informe.png">
                </div>
               <div class="grid_40 omega">
           		 <p class="lead">
           			 “Scotiabank contribuye a construir un mejor futuro en todo el mundo, por medio de sus prácticas bancarias éticas, conciencia ambiental y compromiso con las comunidades” 
           			 </p>
            	<span style="position: absolute; bottom: 10px; right: 0;" >2013 Scotiabank CSR Report</span>
            </div>
                
                
            </div>
            
            
            
            <hr class="clear">
			<div class="grid_50">
				<!-- This is the container for the carousel. -->
				<div id = "carousel1" style=" width:105%; height:480px; margin-left:-2.5%; overflow:scroll;">
					<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
					<!-- You can place links around these images -->
					
                    	<a href="gestion-de-responsabilidad-social.html"><img class = "cloudcarousel" src="photos/5.png" alt="&#187; Si deseas conocer más acerca de nuestra gestión haz click en la imagen" title="Gestión de Responsabilidad Social Corporativa Scotiabank Perú" /></a>
                      
                    
                    
                   
                   		 <a href="voluntariado-sembrando.html"><img class = "cloudcarousel" src="photos/4.png" alt="&#187; ¿Deseas conocer más del voluntariado y paticipar?" title="Voluntariado Sembrando un Mañana" /></a>
                       
                 
					
                   
                    	 <a href="gestion-de-responsabilidad-social.html"><img class = "cloudcarousel" src="photos/2.png" alt="&#187; Conoce más sobre el trabajo de sensibilización" title="Neutralización Huella de Carbono" /></a>
                       
                   
                    
                   <a href="gestion-de-responsabilidad-social.html"> <img class = "cloudcarousel" src="photos/autoria-edificios.png" alt="&#187; Recaudan donaciones económicas para implementar a través de  a través de Cáritas" title="Campaña Calor Patrio" /></a>
                   <a href="voluntariado-colegio-san-miguel-y-san-juan-masias.html"><img class = "cloudcarousel" src="photos/3.png" alt="&#187; Scotiabank tiene un plan a largo plazo para mejorar las condiciones de vida" title="Fortalecimiento de capacidades" /></a>
                  <a href="gestion-de-responsabilidad-social.html"> <img class = "cloudcarousel" src="photos/1.png" alt="&#187; ¿Deseas conocer más del voluntariado y paticipar?" title="Voluntariado Sembrando un Mañana" /></a>
                    
					
					
				<!-- Define left and right buttons. -->	
                 <div id="nav-buttons">
                   <div id="left-but" class="but"><span class="image"><span><span class="arrow">&#32;</span></div>
                    <div id="right-but" class="but"><span class="image"><span class="arrow">&#32;</span></span></div>
                  
                </div>
                
                 <!-- Define elements to accept the alt and title text from the images. -->
                <div id="desc">
               		<p id="title-text">&#32;</p>
					<p id="alt-text">&#32;</p>
				</div>	
                
				</div>

				
               
                
				

				
			</div>
			<hr class="clear">
			<div class="grid_50" id="footer">
				<!--FOOTER CONTENT-->
			</div>
		</div>
	</body>
</html>